<script setup>
// 从 Vue 中导入与 KeepAlive 缓存相关的生命周期钩子
// onActivated：当组件从缓存中被激活（显示）时触发
// onDeactivated：当组件被缓存（隐藏）时触发
import { onActivated, onDeactivated } from "vue";

// 组件被激活时执行的钩子函数
// 当该组件通过 KeepAlive 缓存后再次显示时触发
onActivated(() => {
    // 在控制台打印日志，提示组件已激活
    console.log("MyRight组件被激活了");
});

// 组件被缓存时执行的钩子函数
// 当该组件通过 KeepAlive 缓存且被隐藏时触发
onDeactivated(() => {
    // 在控制台打印日志，提示组件已进入缓存状态
    console.log("MyRight组件被缓存了");
});
</script>

<template>
    <!-- 组件的核心内容：显示组件标识文本 -->
    MyRight组件
</template>

<style scoped>
/*
  scoped 属性确保样式仅作用于当前组件
  目前该组件无需特殊样式，故样式块为空
*/
</style>